<template>
	<view class="tui-centers">
		<tui-share-head></tui-share-head>
		<ls-swiper :list="list" imgKey="imgUrl" :loop="true" :dots='true' :height="250" :autoplay='true' @clickItem="clickItem()" />
		
		<view class="tui-detail-box">
			<view class="tui-detail-title">
				<text>星光剧场</text>
			</view>
			<view>
				欢乐时光
			</view>
			<!-- <view class="tui-flex">
				<view class="tui-detail-ellipse">
					<uniIcons type="map-pin-ellipse" color="#999" size="20"></uniIcons>
					<view class="tui-pd-left">江西省上饶市上饶县皂头镇云谷田园生态农业小镇</view>
				</view>
				<view class="tui-pd-left">
					<text class="tui-pd-right">预订须知</text>
					<uniIcons type="arrowright" color="#999" size="18"></uniIcons>
				</view>
			</view> -->
		</view>
		
		<view class="tui-perform-row">
			<times @change="getTime"></times>
		</view>
		
		<view class="tui-perform-row">
			<view class="tui-position-image" @tap="navTo('/pages/perform/perform')">
				<image class="tui-position-img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1961861013,358764824&fm=26&gp=0.jpg" mode=""></image>
				<view class="tui-position-image-title">
					地图位置
				</view>
			</view>
		</view>
		
		<view class="tui-perform-row">
			<view style="padding: 20rpx;">
				<view class="tui-flex">
					<view class="tui-perform-data">适合人群</view>
					<view class="tui-perform-text">亲子，闺蜜朋友，情侣，单人</view>
				</view>
				<view class="tui-flex">
					<view class="tui-perform-data">演艺类型</view>
					<view class="tui-perform-text">舞台表演</view>
				</view>
				<view class="tui-flex">
					<view class="tui-perform-data">演艺场地</view>
					<view class="tui-perform-text">室内</view>
				</view>
			</view>
		</view>
		
		<view class="tui-perform-btn">
			<view class="tui-flex tui-space-between">
				<view class="tui-icons" @tap="iconsShow = !iconsShow">
					<uni-icons type="heart-filled" size="48" :color="iconsShow?'#fe5b00':'#666'"></uni-icons>
					<view class="tui-heart-filled" :style="iconsShow?'color:#fe5b00':'color:#666'">喜欢</view>
				</view>
				<view>
					<button type="primary" class="btn" @tap="performTo">点击预约</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import tuiShareHead from '@/components/share-head/share-head.vue'
	import lsSwiper from '@/components/ls-swiper/index.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import times from '@/components/pretty-timespicker/pretty-timespicker.vue'
	
	export default {
		name: 'performDetail',
		components: {
			tuiShareHead,
			lsSwiper,
			uniIcons,
			times
		},
		data() {
			return{
				iconsShow: false,
				list: [
					{
						url: 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3556650889,2332342565&fm=26&gp=0.jpg'
					}
				],
				times: ''
			}
		},
		onLoad() {
		},
		methods: {
			clickItem() {
				
			},
			getTime(e) {
				console.log(e)
				this.times = e
			},
			performTo() {
				uni.showToast({
					title: '功能尚未完善',
					icon: 'none'
				})
				// uni.showModal({
				// 	title: '提示',
				// 	content: '您预约的时间为'+ this.times,
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			uni.showToast({
				// 				title: '预约成功'
				// 			})
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				//     }
				// });
			},
			navTo(url) {
				uni.switchTab({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tui-centers {
		padding-bottom: 120rpx;
		background-color: #F3F3F3;
		line-height: 1.8;
		font-size: 28rpx;
	}
	.tui-detail-box {
		padding: 20rpx 30rpx;
		background-color: #fff;
		.tui-detail-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #000000;
			// padding-bottom: 20rpx;
		}
		.tui-detail-ellipse {
			width: 70%;
			display: flex;
			border-right: 2rpx solid #eee;
			padding-right: 20rpx;
		}
	}
	.tui-perform-btn{
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 99;
		background-color: #fff;
		.tui-icons {
			padding-left: 20rpx;
			display: flex;
			align-items: center;
			.tui-heart-filled {
				display: inline-block;
			}
		}
		.btn {
			background-color: #fe5b00;
			font-size: 36rpx;
		}
	}
	.tui-perform-row {
		margin-top: 30rpx;
		background-color: #fff;
		.tui-flex {
			padding: 15rpx 0;
		}
		.tui-perform-data{
			font-size: 32rpx;
			width: 30%;
			font-weight: 600;
		}
		.tui-perform-text {
			font-size: 32rpx;
		}
		.tui-position-image {
			text-align: center;
			padding: 20rpx;
			.tui-position-img{
				width: 100rpx;
				height: 100rpx;
			}
			.tui-position-image-title {
				font-size: 32rpx;
				font-weight: 600;
			}
		}
	}
</style>
